<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../css/webuploader/webuploader.css">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../css/style.min.css">
    <link rel="stylesheet" type="text/css" href="../../js/layer/css/layui.css">
    <style>
        .example {
            position: relative;
            background-color: #fafafa;
        }
        #uploader .queueList {
            border: 3px dashed #ececec;
        }
        #uploader .queueList.filled {
            padding: 17px;
            margin: 0;
            border: 3px dashed transparent;
        }
        #uploader .queueList.webuploader-dnd-over {
            border: 3px dashed #999999;
        }
        #uploader p {
            margin: 0;
        }
        .element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }
        #uploader .placeholder {
            min-height: 350px;
            padding-top: 100px;
            text-align: center;
            color: #cccccc;
            position: relative;
        }
        #uploader .placeholder:before {
            font-family: "Material Design Icons";
            font-size: 50px;
            content: "\f552";
        }
        #uploader .placeholder .webuploader-pick {
            font-size: 18px;
            line-height: 44px;
            padding: 0 30px;
            *width: 120px;
            color: #fff;
            margin: 0 auto 20px auto;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
        #uploader .placeholder .flashTip {
            color: #666666;
            font-size: 12px;
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 20px;
        }
        #uploader .placeholder .flashTip a {
            color: #0785d1;
            text-decoration: none;
        }
        #uploader .placeholder .flashTip a:hover {
            text-decoration: underline;
        }
        #uploader .filelist {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #uploader .filelist:after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            overflow: hidden;
            clear: both;
        }
        #uploader .filelist li {
            width: 110px;
            height: 110px;
            background-color: #fafafa;
            text-align: center;
            margin: 0 8px 20px 0;
            position: relative;
            display: inline;
            float: left;
            overflow: hidden;
            font-size: 12px;
        }
        #uploader .filelist li p.log {
            position: relative;
            top: -45px;
        }
        #uploader .filelist li p.title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow : ellipsis;
            top: 5px;
            text-indent: 5px;
            text-align: left;
        }
        #uploader .filelist li p.progress {
            position: absolute;
            width: 100%;
            height: 8px;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: 50;
            margin: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            background-color: transparent;
            -webkit-box-shadow: 0 0 0;
        }
        #uploader .filelist li p.imgWrap {
            position: relative;
            z-index: 2;
            line-height: 110px;
            vertical-align: middle;
            overflow: hidden;
            width: 110px;
            height: 110px;

            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

            -webit-transition: 200ms ease-out;
            -moz-transition: 200ms ease-out;
            -o-transition: 200ms ease-out;
            -ms-transition: 200ms ease-out;
            transition: 200ms ease-out;
        }
        #uploader .filelist li img {
            width: 100%;
        }
        #uploader .filelist li p.error {
            background: #f43838;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 28px;
            line-height: 28px;
            width: 100%;
            z-index: 100;
        }
        #uploader .filelist li .success {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0px;
            height: 0px;
            border-bottom: 40px solid #33cabb;
            border-left: 40px solid transparent;
            z-index: 200;
        }
        #uploader .filelist li .success:after {
            font-family: "Material Design Icons";
            font-size: 22px;
            content: "\f12c";
            position: absolute;
            right: 0px;
            bottom: -43px;
            color: #fff;
        }
        #uploader .filelist div.file-panel {
            position: absolute;
            height: 0;
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
            background: rgba( 0, 0, 0, 0.5 );
            width: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 300;
        }
        #uploader .filelist div.file-panel span {
            width: 24px;
            height: 24px;
            display: inline;
            float: right;
            overflow: hidden;
            margin: 5px 1px 1px;
            cursor: pointer;
            font-family: "Material Design Icons";
            font-size: 14px;
            color: #33cabb;
            -webkit-transition: .2s linear;
            transition: .2s linear
        }
        #uploader .filelist div.file-panel span.rotateLeft:after {
            content: "\f465";
        }
        #uploader .filelist div.file-panel span.rotateRight:after {
            content: "\f467";
        }
        #uploader .filelist div.file-panel span.cancel:after {
            content: "\f1c0";
        }
        #uploader .filelist div.file-panel span.rotateLeft:hover,
        #uploader .filelist div.file-panel span.rotateRight:hover,
        #uploader .filelist div.file-panel span.cancel:hover {
            color: #fff;
        }
        #uploader .statusBar {
            height: 63px;
            border-top: 1px solid rgba(77,82,89,0.05);
            padding: 0 20px;
            line-height: 63px;
            vertical-align: middle;
            position: relative;
        }
        #uploader .statusBar .progress {
            width: 198px;
            display: inline-block;
            text-align: center;
            position: relative;
            margin: 0 10px 0 0;
        }
        #uploader .statusBar .info {
            display: inline-block;
        }
        #uploader .statusBar .btns {
            position: absolute;
            top: 10px;
            right: 20px;
            line-height: 36px;
        }
        #filePickerBtn {
            display: inline-block;
            float: left;
        }
        #uploader .statusBar .btns .webuploader-pick,
        #uploader .statusBar .btns .uploadBtn,
        #uploader .statusBar .btns .uploadBtn.state-uploading,
        #uploader .statusBar .btns .uploadBtn.state-paused {
            background: #fcfdfe;
            border: 1px solid #ebebeb;
            color: #8b95a5;
            padding: 0px 12px;
            display: inline-block;
            border-radius: 2px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 14px;
            float: left;
        }
        #uploader .statusBar .btns .webuploader-pick-hover,
        #uploader .statusBar .btns .uploadBtn.state-uploading:hover,
        #uploader .statusBar .btns .uploadBtn.state-paused:hover {
            background-color: #f9fafb;
            border-color: #ebebeb;
            color: #4d5259
        }
        #uploader .statusBar .btns .uploadBtn {
            background: #33cabb;
            color: #fff;
            border-color: #33cabb;
        }
        #uploader .statusBar .btns .uploadBtn:hover {
            background: #52d3c7;
            border-color: #52d3c7;
            color: #fff;
        }
        #uploader .statusBar .btns .uploadBtn.disabled {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
</head>

<body>
<div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div id="uploader" class="example">
                        <input type="hidden" name="pics" value="" />
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将文件拖到这里，单次最多可选20个</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped active">0%</div>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePickerBtn"></div><div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/webuploader/webuploader.file.js"></script>
<script type="text/javascript" src="../../js/layer/layui.js"></script>
<script>
    var menuId = 'Sysdocument';
    ready(function() {
        layui.use(['zhanshop'], function(){
            layui.zhanshop.ajax(API_ADDRESS+apiUrlTable+'/'+menuId, 'POST', 'factory=qiniu&type=file&_method=uploadToken', {}, function(data){
                $wrap = $('#uploader'),

                    // 图片容器
                    $queue = $('<ul class="filelist"></ul>').appendTo( $wrap.find('.queueList') ),

                    // 状态栏，包括进度和控制按钮
                    $statusBar = $wrap.find('.statusBar'),

                    // 文件总体选择信息。
                    $info = $statusBar.find('.info'),

                    // 上传按钮
                    $upload = $wrap.find('.uploadBtn'),

                    // 没选择文件之前的内容。
                    $placeHolder = $wrap.find('.placeholder'),

                    // 总体进度条
                    $progress = $statusBar.find('.progress').hide(),

                    // 添加的文件数量
                    fileCount = 0,

                    // 添加的文件总大小
                    fileSize = 0,

                    // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,

                    // 缩略图大小
                    thumbnailWidth = 110 * ratio,
                    thumbnailHeight = 110 * ratio,

                    // 可能有pedding, ready, uploading, confirm, done.
                    state = 'pedding',

                    // 所有文件的进度信息，key为file id
                    percentages = {},

                    // 上传返回值
                    responseDatas = [],

                    supportTransition = (function(){
                        var s = document.createElement('p').style,
                            r = 'transition' in s ||
                                'WebkitTransition' in s ||
                                'MozTransition' in s ||
                                'msTransition' in s ||
                                'OTransition' in s;
                        s = null;
                        return r;
                    })(),

                    // 允许上传的格式
                    acceptExtensions = '',

                    // 允许上传的文件数量
                    fileNumLimit = 20,

                    // 总文件大小限制
                    fileSizeLimit = 200 * 1024 * 1024,

                    // 单个文件大小限制
                    fileSingleSizeLimit = 200 * 1024 * 1024,

                    // WebUploader实例
                    uploader;

                if ( !WebUploader.Uploader.support() ) {
                    alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
                    throw new Error( 'WebUploader does not support the browser you are using.' );
                }
                // 实例化
                uploader = WebUploader.create({
                    pick: {
                        id: '#filePicker',
                        label: '点击选择文件'
                    },
                    dnd: '#uploader .queueList',
                    paste: document.body,

                    accept: {
                        title: 'Audios',
                        extensions: acceptExtensions,
                        mimeTypes: ''
                    },

                    // swf文件路径
                    swf: '/js/webuploader/Uploader.swf',

                    disableGlobalDnd: true,

                    chunked: false,
                    server: 'https://upload.qiniup.com/',
                    formData: {
                        'token': data.data.token,
                    },
                    fileNumLimit: fileNumLimit,
                    fileSizeLimit: fileSizeLimit,
                    fileSingleSizeLimit: fileSingleSizeLimit
                });

                // 添加“添加文件”的按钮，
                uploader.addButton({
                    id: '#filePickerBtn',
                    label: '继续添加'
                });

                // 当有文件添加进来时执行，负责view的创建
                function addFile( file ) {
                    var $li = $( '<li id="' + file.id + '">' +
                            //'<p class="title">' + file.name + '</p>' +
                            '<p class="imgWrap"></p>'+
                            '<p class="progress"><span class="progress-bar progress-bar-striped active"></span></p>' +
                            '</li>' ),

                        $btns = $('<div class="file-panel">' +
                            '<span class="cancel"></span>' +
                            '<span class="rotateRight"></span>' +
                            '<span class="rotateLeft"></span></div>').appendTo( $li ),
                        $prgress = $li.find('p.progress .progress-bar'),
                        $wrap = $li.find( 'p.imgWrap' ),
                        $info = $('<p class="error"></p>'),

                        showError = function( code ) {
                            switch( code ) {
                                case 'exceed_size':
                                    text = '文件大小超出';
                                    break;

                                case 'interrupt':
                                    text = '上传暂停';
                                    break;

                                case 'http':
                                    text = 'http请求错误';
                                    break;

                                case 'not_allow_type':
                                    text = '文件格式不允许';
                                    break;

                                default:
                                    text = '上传失败，请重试';
                                    break;
                            }

                            $info.text( text ).appendTo( $li );
                        };

                    if ( file.getStatus() === 'invalid' ) {
                        showError( file.statusText );
                    } else {
                        // @todo lazyload
                        $wrap.text( '预览中' );
                        uploader.makeThumb( file, function( error, src ) {
                            if ( error ) {
                                $wrap.empty().append( '<div style="width: 110px; height: 110px;background: #eee;">'+file.name+'</div>' );
                                return;
                            }

                            var img = $('<img src="'+src+'">');
                            $wrap.empty().append( img );
                        }, thumbnailWidth, thumbnailHeight );

                        percentages[ file.id ] = [ file.size, 0 ];
                        file.rotation = 0;

                        /* 检查文件格式 */
                        if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
                            //showError( 'not_allow_type' );
                            //uploader.removeFile(file);
                        }
                    }

                    file.on('statuschange', function( cur, prev ) {
                        if ( prev === 'progress' ) {
                            $prgress.hide().width(0);
                        } else if ( prev === 'queued' ) {
                            $li.off( 'mouseenter mouseleave' );
                            $btns.remove();
                        }

                        // 成功
                        if ( cur === 'error' || cur === 'invalid' ) {
                            console.log( file.statusText );
                            showError( file.statusText );
                            percentages[ file.id ][ 1 ] = 1;
                        } else if ( cur === 'interrupt' ) {
                            showError( 'interrupt' );
                        } else if ( cur === 'queued' ) {
                            percentages[ file.id ][ 1 ] = 0;
                        } else if ( cur === 'progress' ) {
                            $info.remove();
                            $prgress.css('display', 'block');
                        } else if ( cur === 'complete' ) {
                            $li.append( '<span class="success"></span>' );
                        }

                        $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
                    });

                    $li.on( 'mouseenter', function() {
                        $btns.stop().animate({height: 30});
                    });

                    $li.on( 'mouseleave', function() {
                        $btns.stop().animate({height: 0});
                    });

                    $btns.on( 'click', 'span', function() {
                        var index = $(this).index(),
                            deg;

                        switch ( index ) {
                            case 0:
                                uploader.removeFile( file );
                                return;

                            case 1:
                                file.rotation += 90;
                                break;

                            case 2:
                                file.rotation -= 90;
                                break;
                        }

                        if ( supportTransition ) {
                            deg = 'rotate(' + file.rotation + 'deg)';
                            $wrap.css({
                                '-webkit-transform': deg,
                                '-mos-transform': deg,
                                '-o-transform': deg,
                                'transform': deg
                            });
                        } else {
                            $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');

                        }


                    });

                    $li.appendTo( $queue );
                }

                // 统计队列内未完成上传的数量
                function getQueueCount() {
                    var file, i, status, readyFile = 0, files = uploader.getFiles();

                    for (i = 0; file = files[i++]; ) {
                        status = file.getStatus();
                        if (status == 'inited' || status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
                    }

                    return readyFile;
                }

                // 负责view的销毁
                function removeFile( file ) {
                    var $li = $('#'+file.id);

                    delete percentages[ file.id ];
                    updateTotalProgress();
                    $li.off().find('.file-panel').off().end().remove();
                }

                function updateTotalProgress() {
                    var loaded = 0,
                        total = 0,
                        span  = $progress.find('.progress-bar'),
                        percent;

                    $.each( percentages, function( k, v ) {
                        total += v[ 0 ];
                        loaded += v[ 0 ] * v[ 1 ];
                    } );

                    percent = total ? loaded / total : 0;

                    span.text( Math.round( percent * 100 ) + '%' );
                    span.css( 'width', Math.round( percent * 100 ) + '%' );
                    updateStatus();
                }

                function updateStatus() {
                    var text = '', stats;

                    if ( state === 'ready' ) {
                        text = '选中' + fileCount + '个文件，共' +
                            WebUploader.formatSize( fileSize ) + '。';
                    } else if ( state === 'confirm' ) {
                        stats = uploader.getStats();
                        if ( stats.uploadFailNum ) {
                            text = '已成功上传' + stats.successNum+ '个文件，'+
                                stats.uploadFailNum + '个文件上传失败，<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
                        }

                    } else {
                        stats = uploader.getStats();
                        text = '共' + fileCount + '个（' +
                            WebUploader.formatSize( fileSize )  +
                            '），已上传' + stats.successNum + '个';

                        if ( stats.uploadFailNum ) {
                            text += '，失败' + stats.uploadFailNum + '个';
                        }
                    }

                    $info.html( text );
                }

                function setState( val ) {
                    var file, stats;

                    if ( val === state ) {
                        return;
                    }

                    $upload.removeClass( 'state-' + state );
                    $upload.addClass( 'state-' + val );
                    state = val;

                    switch ( state ) {
                        case 'pedding':
                            $placeHolder.removeClass( 'element-invisible' );
                            $queue.parent().removeClass('filled');
                            $queue.hide();
                            $statusBar.addClass( 'element-invisible' );
                            uploader.refresh();
                            break;

                        case 'ready':
                            $placeHolder.addClass( 'element-invisible' );
                            $( '#filePickerBtn' ).removeClass( 'element-invisible');
                            $queue.parent().addClass('filled');
                            $queue.show();
                            $statusBar.removeClass('element-invisible');
                            uploader.refresh();
                            break;

                        case 'uploading':
                            $progress.show();
                            $upload.text( '暂停上传' );
                            break;

                        case 'paused':
                            $progress.show();
                            $upload.text( '继续上传' );
                            break;

                        case 'confirm':
                            $progress.hide();
                            $upload.text( '开始上传' ).addClass( 'disabled' );

                            stats = uploader.getStats();
                            if ( stats.successNum && !stats.uploadFailNum ) {
                                setState( 'finish' );
                                return;
                            }
                            break;
                        case 'finish':
                            stats = uploader.getStats();
                            if ( stats.successNum ) {
                                // 上传成功做一个动作
                                // 同步到后台,original,size 这两个值我也要
                                var reqData = [];
                                for(var i in responseDatas){
                                    reqData.push({
                                        'url': data.data.domain+'/'+responseDatas[i]['key'],
                                        'size': responseDatas[i]['size'],
                                        'original': responseDatas[i]['original']
                                    });
                                }
                                layui.zhanshop.ajax(API_ADDRESS+apiUrlTable+'/Sysdocument', 'POST', {"system_files":reqData},{},function(){
                                    window.location = '../document.html?_id=Sysdocument&t='+(Date.parse(new Date()) / 1000);
                                },function(xhr){return layui.zhanshop.alert(xhr.responseJSON[apiMsg] ? xhr.responseJSON[apiMsg] : xhr.statusText, 'danger');}, '后台数据同步中...');

                                console.log(reqData);
                                console.log( '上传成功' );
                            } else {
                                // 没有成功的图片，重设
                                state = 'done';
                                location.reload();
                            }
                            break;
                    }

                    updateStatus();

                    if (!getQueueCount()) {
                        $upload.addClass('disabled');
                    } else {
                        $upload.removeClass('disabled');
                    }
                }

                uploader.onUploadProgress = function( file, percentage ) {
                    var $li = $('#'+file.id),
                        $percent = $li.find('.progress .progress-bar');

                    $percent.css( 'width', percentage * 100 + '%' );
                    percentages[ file.id ][ 1 ] = percentage;
                    updateTotalProgress();
                };
                uploader.onUploadAccept = function( object, ret ) {
                    //console.log(8888, object, ret, 8888);
                },
                    uploader.onUploadSuccess = function( file, response ) {
                        response['original'] = file.name;
                        response['size'] = file.size;
                        response['duration'] = file.duration;
                        responseDatas.push(response);
                        var $input_file = $wrap.find('input[type="hidden"]');
                        if ($input_file.val()) {
                            $input_file.val($input_file.val() + ',' + response.id);
                        } else {
                            $input_file.val(response.id);
                        }

                    };

                uploader.onFileQueued = function( file ) {
                    fileCount++;
                    fileSize += file.size;

                    if ( fileCount === 1 ) {
                        $placeHolder.addClass( 'element-invisible' );
                        $statusBar.show();
                    }

                    addFile( file );
                    setState( 'ready' );
                    updateTotalProgress();
                };

                uploader.onFileDequeued = function( file ) {
                    fileCount--;
                    fileSize -= file.size;

                    if ( !fileCount ) {
                        setState( 'pedding' );
                    }

                    removeFile( file );
                    updateTotalProgress();

                };

                uploader.on( 'all', function( type ) {
                    var stats;
                    switch( type ) {
                        case 'uploadFinished':
                            setState( 'confirm' );
                            break;

                        case 'startUpload':
                            setState( 'uploading' );
                            break;

                        case 'stopUpload':
                            setState( 'paused' );
                            break;

                    }
                });

                uploader.onError = function( code ) {
                    if ( code == "Q_EXCEED_NUM_LIMIT" ) {
                        alert( "最多传5个文件" );
                    } else if ( code == "F_DUPLICATE" ) {
                        alert( "文件已存在队列中" );
                    } else if ( code == "Q_TYPE_DENIED" ) {
                        alert( "文件类型不满足" );
                    } else if ( code == "F_EXCEED_SIZE" ) {
                        alert( "文件大小不能超过" + fileSingleSizeLimit / (1024 * 1024) + " M" );
                    } else if ( code == "Q_EXCEED_SIZE_LIMIT") {
                        alert("添加的文件总大小不能超过 " + fileSizeLimit / (1024 * 1024) + " M");
                    }
                };

                $upload.on('click', function() {
                    if ( $(this).hasClass( 'disabled' ) ) {
                        return false;
                    }

                    if ( state === 'ready' ) {
                        uploader.upload();
                    } else if ( state === 'paused' ) {
                        uploader.upload();
                    } else if ( state === 'uploading' ) {
                        uploader.stop();
                    }
                });

                $info.on( 'click', '.retry', function() {
                    uploader.retry();
                } );

                $info.on( 'click', '.ignore', function() {
                    alert( 'todo' );
                } );

                $upload.addClass( 'state-' + state );
                updateTotalProgress();

            }, function(xhr){
                return parent.layui.zhanshop.alert(xhr.responseJSON[apiMsg] ? xhr.responseJSON[apiMsg] : xhr.statusText, 'danger');
            }, true, false);




        });
    });
</script>
</body>
</html>